<template>
  <div class="header">
    <div class="headerContent">
      <!-- <div class="headerSidebarBtn" v-if="device === 'mobile' || device === 'pad'"> -->
      <div class="headerSidebarBtn" v-if="sidebar">
        <i class="iconfont icon-cebianlan" @click.stop="showBar"></i>
      </div>
      <div class="headerCenter">
        <img src="http://pb4de9kd2.bkt.clouddn.com/touxiang128.png" width="60" alt="">
        <span>于梦中的博客空间</span>
      </div>
      <div class="headerSidebarBtn" v-if="sidebar">
        <i class="iconfont icon-mulu4" @click.stop="showAside"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from 'store'
export default {
  name: 'appHeader',
  computed: {
    ...mapGetters([
      'device',
      'sidebar',
      'open',
      'openAside'
    ])
  },
  methods: {
    showBar() {
      store.dispatch('OpenNavBar', !this.open)
    },
    showAside() {
      console.log('d', !this.openAside)
      store.dispatch('OpenAsideBar', !this.openAside)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~common/styles/variables.scss';
.header {
  margin: 0 auto;
  .headerContent {
    height: 60px;
    line-height: 60px;
    display: flex;
    .headerSidebarBtn {
      margin: 0 20px;
      flex: 0 0 30px;
      i {
        width: 20px;
        height: 20px;
        padding: 10px;
      }
    }
    .headerCenter{
      flex: 1;
      span {
        vertical-align: top;
      }
    }
  }
}
</style>
